<template>
    <div>
        <h1>文章阅读{{ infor }}---{{ dange }}---{{ heandDange }}</h1>
        <div v-if="!text || !gbText">
            电脑任务管理器快捷键：Ctrl + Shift + ESC、Ctrl+Alt+Delete、通过任务栏、输入命令taskmgr。本次以Vostro 5581，系统版本：Windows10专业版为例。

            Ctrl + Shift + ESC：组合键Ctrl + Shift + ESC无疑是xp系统还是win 7 系统最快速方便打开任务管理器的快捷键。下图是键位说明，同时按住这三个键就能直接调出任务管理器。
        </div>
        <div v-else>{{ lastText  }}</div>
        <div>
            <el-button @click="addFive">+5</el-button>
            <el-button @click="changeText">获取新内容</el-button>
        </div>
        <div style="height: 1000px;">
            <a href="#" @click.prevent="readMove">阅读更多》》》</a>
        </div>
    </div>
</template>
<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
export default {
    name: 'get-way',
    data(){
        return {
            gbText:''
        }
    },
    computed: {
        ...mapState(['infor']),   // 这里取得是 根 仓库中得数据。
        ...mapState('a', ['dange', 'text']),   // 这里取得是 模块 中得数据， 第一个参数就是注册的模块名称，前提是模块中必须开启命名空间，才能这样写。
        ...mapGetters('a', ['heandDange']),
        lastText(){
            return this.text ? this.text : this.gbText
        }
    },
    mounted() {
        this.getSessionCont()  // 解决页面刷新，vuex数据丢失的问题
    },
    methods: {
        ...mapMutations('a', ['changeState']),
        ...mapActions('a', ['commitChengeText']),
        addFive() {
            this.changeState(5)    // 必须要用 this 调用
        },
        changeText() {
            const params = {
                fontNumbs: 5
            }
            this.commitChengeText(params)
        },
        getSessionCont() {
            this.gbText = JSON.parse(sessionStorage.getItem('textCont'))
        },
        readMove() {
            this.$router.push({ name: 'father', params: { id: 123 } })
        }
    }
}
</script>
<style scoped></style>